<!--学生互评-->
<template>
  <div id="mutual">
    <div class="head">
      <h4 class="col-sm-6">班主任老师您好，</h4>
      <h4 class="col-sm-6">专业班级:{{className}}</h4>
    </div>
    <div class="center">
      <div class="col-sm-1"></div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            班主任、班长
          </div>
          <div class="panel-body myPanel">
            <p class="inline">班主任:{{headTeacher}}</p>
            <br><br><br>
            <p class="inline">班长: {{monitor}}</p>
          </div>
        </div>
      </div>
      <div class="col-sm-1"></div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            评价小组成员
          </div>
          <div class="panel-body myPanel">
            <div v-for="commentator in commentators">
              <p class="inline">{{commentator}}</p>
              <br>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-1"></div>
    </div>
    <div class="myTable table-responsive">
      <table class="table">
        <thead>
        <tr>
          <th class="text-center">姓名</th>
          <th class="text-center">学号</th>
          <th class="text-center">专业成绩(80%)</th>
          <th class="text-center">基础性素质测评成绩（10%）</th>
          <th class="text-center">发展性素质测评成绩(10%)</th>
          <th class="text-center">五分制总成绩</th>
        </tr>
        </thead>
        <tbody>
        <tr  v-for="grade in grades">
          <td>{{grade.stuName}}</td>
          <td>{{grade.stuNum}}</td>
          <td>{{grade.study|byte}}</td>
          <td>{{grade.basis|byte}}</td>
          <td>{{grade.development|byte}}</td>
          <td>{{grade.sum|byte}}</td>
         </tr>
        </tbody>
      </table>
      <div class="spinner" ref="loadingEle">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import API from '../config/request';
  import {formatDate, byte} from '../config/date';
  import { decodeData } from '../config/base64';
  export default {
    name: 'mutual',
    data() {
      return {
        url: API.URL,
        headTeacher: '',
        monitor: '',
        commentators: [],   //小组评价成员
        className: '',
        studentNo: '',
        classId: '',
        grades: []
      }
    },
    created() {
      this.studentNo = decodeData(localStorage.getItem('studentNo'))
      this.classId = decodeData(localStorage.getItem('classId'))
      this.getClassPro()
      this.getAll()
      this.getGrade()
    },
    methods: {
      //拿到班级跟专业
      getClassPro: function () {
        this.$http.get(this.url + 'common/findoneclass?classId=' + this.classId).then(function (response) {
          this.className = response.bodyText
        })
      },
      getAll: function () {
        this.$http.get(this.url + 'common/listclassadmin?classId=' + this.classId).then(function (response) {
          let j = 0
          for (let i = 0; i < response.body.length; i++) {
            console.log(response.body[i])
            if (response.body[i].identity === 1) {
              this.headTeacher = response.body[i].stuNum
            } else if (response.body[i].identity === 2) {
              this.monitor = response.body[i].stuNum
            } else {
              this.commentators[j] = response.body[i].stuNum
              j++
            }
          }
        })
      },
      getGrade :function(){
        this.grades = []
        this.$http.get(this.url + 'common/findbyclassid?classId=' + this.classId).then(function (response) {
          this.grades = response.body
          this.$refs.loadingEle.style.display = 'none'
        })
      }
    },
    filters: {
      formatDate(data) {
        if(data == null || data == undefined){
          return '日期显示错误';
        }else{
          return formatDate(data);
        }

      },
      byte (data){
        return byte(data)
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
  .head{
    width: 100%;
    height: 150px;
  }
  .center{
    width: 100%;
    height: 500px;
    display: block;
  }
  .myTable{
    width: 100%;
    display: block;
  }
  .spinner {
    width: 60px;
    height: 60px;
    position: relative;
    margin: 50px auto;
  }

  .double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #67CF22;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: bounce 2.0s infinite ease-in-out;
    animation: bounce 2.0s infinite ease-in-out;
  }

  .double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
  }

  @-webkit-keyframes bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
  }
  @keyframes bounce {
    0%, 100% {
      transform: scale(0.0);
      -webkit-transform: scale(0.0);
    } 50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
  }
  @media screen and (min-width: 800px){
    .head{
      width: 100%;
      height: 50px;
      display: block;
    }
    .center{
      width: 100%;
      height: 250px;
      display: block;
    }
    .myTable{
      width: 100%;
      display: block;
    }
  }

</style>
